<template>
  <el-input :readonly="true" v-model="address.desc">
    <template #append>
      <el-button @click="onChooseAddress" :icon="Search" />
    </template>
  </el-input>
</template>

<script setup name="x-address">
import {Search} from '@element-plus/icons-vue';
let address = reactive({
  desc: ""
});
const emit = defineEmits(['change', 'update:modelValue']);

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {
      return {}
    }
  },
})

const onChooseAddress = () => {
  Dialog.open("x-address-form", "选择地址", {
    mounted: (c) => {
      c.render(address);
    },
    confirm: async (c) => {
      let area = await c.getArea();
      if(area === false) {
        return;
      }

      emit('update:modelValue', area);
      emit('change', area)
      Dialog.close();
    }
  })
}

/**
 * watch  监听
 */
watch(() => props.modelValue, (value) => {
  let desc = Helper.formatAddress(value);
  Helper.setReactive(address, value);
  address.desc = desc;
}, {immediate: true, deep: true})
</script>

<style scoped>

</style>
